<template>
	<view class="container">
		<!-- 页面头部 -->
		<view class="page-header">
			<text class="page-title">气体检测记录</text>
			<view class="header-actions">
				<text class="add-btn" @click="saveForm">保存记录</text>
			</view>
		</view>


		<!-- 检测类型选择 -->
		<view class="type-section">
			<view class="section-title">
				<text class="title-text">选择检测类型</text>
			</view>

			<view class="type-grid">
				<view
					v-for="(type, index) in detectionTypes"
					:key="index"
					class="type-card"
					:class="{ 'active': selectedType === type.value }"
					@click="selectDetectionType(type.value)"
				>
					<view class="type-icon">
						<text class="icon-text">{{ type.icon }}</text>
					</view>
					<view class="type-info">
						<text class="type-name">{{ type.name }}</text>
						<text class="type-desc">{{ type.description }}</text>
					</view>
					<view class="type-checkbox" :class="{ 'checked': selectedType === type.value }">
						<text class="check-icon" v-if="selectedType === type.value">✓</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 检测参数设置 -->
		<view class="params-section">
			<view class="section-title">
				<text class="title-text">检测参数</text>
			</view>

			<view class="params-form">
				<view class="form-item">
					<text class="label">检测位置</text>
					<input class="input" v-model="detectionParams.location" placeholder="请输入检测位置" />
				</view>

				<view class="form-item">
					<text class="label">检测人员</text>
					<input class="input" v-model="detectionParams.personnel" placeholder="请输入检测人员姓名" />
				</view>

				<view class="form-item">
					<text class="label">检测设备</text>
					<picker :value="equipmentIndex" :range="equipmentList" range-key="name" @change="onEquipmentChange">
						<view class="picker-view">
							<text class="picker-text">{{ selectedEquipment.name || '请选择检测设备' }}</text>
							<text class="picker-arrow">▼</text>
						</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">检测时间</text>
					<picker mode="datetime" :value="detectionParams.detectionTime" @change="onDetectionTimeChange">
						<view class="picker-view">
							<text class="picker-text">{{ detectionParams.detectionTime || '请选择检测时间' }}</text>
							<text class="picker-arrow">▼</text>
						</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">备注</text>
					<textarea class="textarea" v-model="detectionParams.remarks" placeholder="请输入检测备注（可选）"></textarea>
				</view>
			</view>
		</view>

		<!-- 检测历史记录 -->
		<view class="history-section">
			<view class="section-title">
				<text class="title-text">检测历史</text>
				<text class="view-all" @click="viewAllHistory">查看全部</text>
			</view>

			<scroll-view class="history-scroll" scroll-y>
				<view class="history-list">
					<view
						v-for="(record, index) in recentHistory"
						:key="index"
						class="history-item"
					>
						<view class="history-header">
							<view class="history-info">
								<text class="detection-time">{{ record.detectionTime }}</text>
								<text class="detection-type">{{ getTypeName(record.type) }}</text>
							</view>
							<view class="history-status" :class="getHistoryStatusClass(record.status)">
								<text class="status-text">{{ getHistoryStatusText(record.status) }}</text>
							</view>
						</view>

						<view class="history-content">
							<view class="history-detail">
								<text class="label">位置：</text>
								<text class="value">{{ record.location }}</text>
							</view>
							<view class="history-detail">
								<text class="label">人员：</text>
								<text class="value">{{ record.personnel }}</text>
							</view>
							<view class="history-detail">
								<text class="label">结果：</text>
								<text class="value" :class="record.status === 'normal' ? 'result-normal' : 'result-abnormal'">
									{{ record.result }}
								</text>
							</view>
						</view>
					</view>

					<view v-if="recentHistory.length === 0" class="empty-history">
						<text class="empty-text">暂无检测历史</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 操作区 -->
		<view class="detection-actions">
			<button class="btn btn-secondary" @click="loadHistory">刷新历史</button>
			<button class="btn btn-primary" @click="saveForm" :disabled="!canSaveForm">
				<text v-if="!isSaving">保存记录</text>
				<text v-else>保存中...</text>
			</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detectionTypes: [
					{
						value: 'o2',
						name: '氧气',
						icon: 'O₂',
						description: '检测氧气浓度'
					},
					{
						value: 'co',
						name: '一氧化碳',
						icon: 'CO',
						description: '检测一氧化碳浓度'
					},
					{
						value: 'h2s',
						name: '硫化氢',
						icon: 'H₂S',
						description: '检测硫化氢浓度'
					},
					{
						value: 'ch4',
						name: '甲烷',
						icon: 'CH₄',
						description: '检测甲烷浓度'
					},
					{
						value: 'co2',
						name: '二氧化碳',
						icon: 'CO₂',
						description: '检测二氧化碳浓度'
					},
					{
						value: 'voc',
						name: '挥发性有机物',
						icon: 'VOC',
						description: '检测挥发性有机物浓度'
					}
				],
				selectedType: '',
				detectionParams: {
					location: '',
					personnel: '',
					equipmentId: '',
					detectionTime: '',
					remarks: ''
				},
				equipmentIndex: 0,
				equipmentList: [
					{ id: '1', name: '便携式气体检测仪 MS-01' },
					{ id: '2', name: '四合一气体检测仪 GD-04' },
					{ id: '3', name: '固定式气体监测系统 FS-01' }
				],
				recentHistory: [],
				isSaving: false
			}
		},
		computed: {
			selectedEquipment() {
				return this.equipmentList[this.equipmentIndex] || {}
			},
			canSaveForm() {
				return this.selectedType &&
					   this.detectionParams.location.trim() &&
					   this.detectionParams.personnel.trim() &&
					   this.detectionParams.detectionTime
			}
		},
		onLoad() {
			this.loadHistory()
		},
		methods: {
			// 选择检测类型
			selectDetectionType(type) {
				this.selectedType = type
			},

			// 设备变化
			onEquipmentChange(e) {
				this.equipmentIndex = e.detail.value
				this.detectionParams.equipmentId = this.selectedEquipment.id
			},

			// 检测时间变化
			onDetectionTimeChange(e) {
				this.detectionParams.detectionTime = e.detail.value
			},

			// 加载历史记录
			loadHistory() {
				// 模拟API调用
				const mockHistory = [
					{
						id: 1,
						type: 'o2',
						location: 'A区生产车间',
						personnel: '张三',
						detectionTime: '2025-01-15 09:30',
						status: 'normal',
						result: '正常',
						value: '20.8',
						unit: '%VOL',
						range: '19.5-23.5%VOL'
					},
					{
						id: 2,
						type: 'co',
						location: 'B区锅炉房',
						personnel: '李四',
						detectionTime: '2025-01-15 10:15',
						status: 'normal',
						result: '正常',
						value: '12',
						unit: 'ppm',
						range: '0-50ppm'
					},
					{
						id: 3,
						type: 'h2s',
						location: 'C区污水处理站',
						personnel: '王五',
						detectionTime: '2025-01-15 11:00',
						status: 'abnormal',
						result: '异常',
						value: '8.5',
						unit: 'ppm',
						range: '0-10ppm'
					}
				]

				this.recentHistory = mockHistory.slice(0, 3)
			},

			// 保存表单
			async saveForm() {
				if (!this.canSaveForm) {
					uni.showToast({
						title: '请完善检测参数',
						icon: 'none'
					})
					return
				}

				this.isSaving = true

				try {
					// 模拟保存过程
					await new Promise(resolve => setTimeout(resolve, 1000))

					// 创建保存的数据
					const formData = {
						type: this.selectedType,
						location: this.detectionParams.location,
						personnel: this.detectionParams.personnel,
						equipmentId: this.selectedEquipment.id,
						detectionTime: this.detectionParams.detectionTime,
						remarks: this.detectionParams.remarks
					}

					// 清空表单
					this.selectedType = ''
					this.detectionParams = {
						location: '',
						personnel: '',
						equipmentId: '',
						detectionTime: '',
						remarks: ''
					}
					this.equipmentIndex = 0

					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})

					// 刷新历史记录
					this.loadHistory()

				} catch (error) {
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					})
				} finally {
					this.isSaving = false
				}
			},


			// 查看全部历史
			viewAllHistory() {
				uni.showToast({
					title: '查看全部历史功能开发中',
					icon: 'none'
				})
			},

			// 获取类型名称
			getTypeName(type) {
				const typeItem = this.detectionTypes.find(t => t.value === type)
				return typeItem ? typeItem.name : type
			},

			// 获取历史状态样式类
			getHistoryStatusClass(status) {
				return `status-${status}`
			},

			// 获取历史状态文本
			getHistoryStatusText(status) {
				const statusMap = {
					normal: '正常',
					abnormal: '异常'
				}
				return statusMap[status] || status
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #f5f5f5;
	}

	.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #e4e7ed;

		.page-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		.header-actions {
			.add-btn {
				font-size: 28rpx;
				color: #409EFF;
			}
		}
	}


	.type-section,
	.params-section,
	.history-section {
		background: #fff;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.section-title {
			margin-bottom: 30rpx;

			.title-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.view-all {
				float: right;
				font-size: 24rpx;
				color: #409EFF;
			}
		}
	}

	.type-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
	}

	.type-card {
		display: flex;
		padding: 20rpx;
		border: 2rpx solid #e4e7ed;
		border-radius: 12rpx;
		cursor: pointer;
		transition: all 0.3s ease;

		&:hover {
			border-color: #409EFF;
		}

		&.active {
			border-color: #409EFF;
			background: #e6f7ff;
		}

		.type-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 12rpx;
			background: #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			.icon-text {
				font-size: 28rpx;
				font-weight: bold;
			}
		}

		.type-info {
			flex: 1;

			.type-name {
				display: block;
				font-size: 28rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 5rpx;
			}

			.type-desc {
				display: block;
				font-size: 24rpx;
				color: #666;
			}
		}

		.type-checkbox {
			width: 40rpx;
			height: 40rpx;
			border: 2rpx solid #e4e7ed;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			&.checked {
				background: #409EFF;
				border-color: #409EFF;

				.check-icon {
					color: #fff;
					font-size: 20rpx;
					font-weight: bold;
				}
			}
		}
	}

	.params-form {
		.form-item {
			margin-bottom: 30rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.label {
				display: block;
				font-size: 28rpx;
				color: #333;
				margin-bottom: 15rpx;
				font-weight: 500;
			}

			.input {
				width: 100%;
				height: 80rpx;
				border: 2rpx solid #e4e7ed;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				background: #fff;
				box-sizing: border-box;
			}

			.picker-view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				border: 2rpx solid #e4e7ed;
				border-radius: 8rpx;
				padding: 0 20rpx;
				background: #fff;

				.picker-text {
					font-size: 28rpx;
					color: #333;
				}

				.picker-arrow {
					font-size: 24rpx;
					color: #999;
				}
			}

			.textarea {
				width: 100%;
				min-height: 120rpx;
				border: 2rpx solid #e4e7ed;
				border-radius: 8rpx;
				padding: 20rpx;
				font-size: 28rpx;
				background: #fff;
				box-sizing: border-box;
			}
		}
	}

	.history-scroll {
		max-height: 300rpx;
	}

	.history-list {
		.history-item {
			padding: 20rpx;
			border: 1rpx solid #f0f0f0;
			border-radius: 8rpx;
			margin-bottom: 15rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.history-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15rpx;

				.history-info {
					.detection-time {
						display: block;
						font-size: 26rpx;
						font-weight: bold;
						color: #409EFF;
						margin-bottom: 5rpx;
					}

					.detection-type {
						display: block;
						font-size: 24rpx;
						color: #666;
					}
				}

				.history-status {
					padding: 6rpx 12rpx;
					border-radius: 8rpx;
					font-size: 20rpx;

					&.status-normal {
						background: #67C23A;
						color: #fff;
					}

					&.status-abnormal {
						background: #F56C6C;
						color: #fff;
					}
				}
			}

			.history-content {
				.history-detail {
					display: flex;
					margin-bottom: 8rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						font-size: 24rpx;
						color: #666;
						min-width: 120rpx;
					}

					.value {
						font-size: 24rpx;
						color: #333;
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						&.result-normal {
							color: #67C23A;
							font-weight: bold;
						}

						&.result-abnormal {
							color: #F56C6C;
							font-weight: bold;
						}
					}
				}
			}
		}

		.empty-history {
			text-align: center;
			padding: 40rpx 0;

			.empty-text {
				font-size: 26rpx;
				color: #999;
			}
		}
	}

	.detection-actions {
		padding: 20rpx 30rpx;
		background: #fff;
		display: flex;
		gap: 20rpx;

		.btn {
			flex: 1;
			height: 80rpx;
			border-radius: 12rpx;
			font-size: 32rpx;
			font-weight: bold;
			border: none;

			&.btn-secondary {
				background: #f0f0f0;
				color: #666;
			}

			&.btn-primary {
				background: #409EFF;
				color: #fff;

				&:disabled {
					opacity: 0.6;
				}
			}
		}
	}

</style>
